<template>
  <h2 v-if="route.query.contractStatus=='3'" 
    style="background-color: bisque;width: 80px;color: red;">已拒绝</h2>
  <h2 v-if="route.query.contractStatus=='2'" 
    style="background-color: bisque;width: 80px;color: red;">已通过</h2>
  <div >
    <h2>查看(通过或拒绝)</h2><br>
    <table>
      <tr>
        <td>
          <el-form-item label="合同标题：" style="font-size: 20px;float: right;">
            <el-input v-model="form.contracTitle" style="width: 300px;height: 40px;"
            placeholder="请输入合同标题" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="对方单位："style="font-size: 20px;float: right;">
            <el-input v-model="form.opponentUnit" style="width: 300px;height: 40px;"
            placeholder="请输入对方单位" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="对方负责人："style="font-size: 20px;float: right;">
            <el-input v-model="form.opponentName" style="width: 300px;height: 40px;"
            placeholder="请输入对方负责人" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同类型："style="font-size: 20px;float: right;">
            <el-input v-model="form.opponenType" style="width: 300px;height: 40px;"
            placeholder="请输入合同类别" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间："style="font-size: 20px;float: right;">
            <el-date-picker v-model="form.signedTime" type="date" 
              placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;"/>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人："style="font-size: 20px;float: right;">
            <el-input v-model="form.handlingName" style="width: 300px;height: 40px;"
            placeholder="请输入经办人" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同金额："style="font-size: 20px;float: right;">
            <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;"
            placeholder="请输入合同金额" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同标的或项目说明" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;" >
          <el-input v-model="form.projectExplain" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同主要条款/边更条款" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;">
          <el-input v-model="form.projectArticle" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <td style="font-size: 20px;float: left;margin-left: 50px;margin-top: 25px;">合同文本(附件)：</td>
      <td style="float: left; margin-left: 30px;width: 200px;">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="ContractRead/api/ReadContract/UpdateFile" disabled>
        </el-upload><br>
      </td>
  </table>
  <hr><br>
    <h3>审批结果</h3>
    <el-table :data="tableData" border style="width:800px">
    <el-table-column prop="results" label="审批结果" width="200" align="center"/>
    <el-table-column prop="remarks" label="备注" width="200" align="center"/>
    <el-table-column prop="approvaDate" label="审批时间" width="200" align="center">
      <template v-slot="scope">
        <span>{{ (scope.row.approvaDate).substring(0,10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="approvaName" label="审批人" width="200" align="center"/>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive } from 'vue'
import {ref} from 'vue'
import { useRoute } from 'vue-router';
const route=useRoute()
const form = reactive({
  contractNumber:'TY202010080122',
  contractId:route.query.contractId,
  contracTitle:'',
  opponentName:'',
  opponentUnit:'',
  opponenType:'',
  signedTime:'',
  handlingName:'',
  contractAmount:'',
  projectExplain:'',
  projectArticle:'',
  contractFile:' ',
  contractStatus:'',
  classify:1,
  createName:'',
  createDate:''
})
onMounted(()=>{
  GetContracted()
  //线路下拉框
  GetAllline()
  //审批记录
  GetRecording()
})
//线路
const lines:any=ref([])
const GetAllline=()=>{
  axios.get('FoundationRead/api/Foundation/GetLine', {
    params: {
      pageIndex:1,
      pageSize:10
    }
  }).then((ret) => {
    console.log(ret.data.data)
    lines.value=ret.data.data.plist
  })
}

//货主合同查看详情
const GetContracted=()=>{
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId:form.contractId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    form.contracTitle=ret.data.data.contracTitle
    form.opponentUnit=ret.data.data.opponentUnit
    form.opponentName=ret.data.data.opponentName
    form.opponenType=ret.data.data.opponenType
    form.signedTime=ret.data.data.signedTime
    form.handlingName=ret.data.data.handlingName
    form.contractAmount=ret.data.data.contractAmount
    form.projectExplain=ret.data.data.projectExplain
    form.projectArticle=ret.data.data.projectArticle
    localStorage.setItem('contractFile',ret.data.data.contractFile)
    kk()
  })
}
//图片
const fileList=ref()
const kk=()=>{
  const file = ref([
  {
    name: localStorage.getItem('contractFile'),
    url: 'ContractRead/Imge/'+localStorage.getItem('contractFile'),
  }
  ])
  fileList.value=file.value
}
const tableData=ref([])
const GetRecording=()=>{
  axios.get('ContractRead/api/ReadContract/RecordingGetAll', {
    params: {
      contractId:form.contractId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    tableData.value=ret.data.data
  })
}
</script>

<style scoped>

</style>